<template>
  <div class="no-padding app-container">
    <lst-page-container>
      <template slot="query">
        <el-form :model="tableQueryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
          <el-form-item label="检查年份" prop="inspectYear">
            <el-date-picker
                v-model="tableQueryParams.inspectYear"
                align="right"
                type="year"
                value-format="yyyy"
                placeholder="选择检查年份">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="关键字" prop="inspectName">
            <el-input
                v-model="tableQueryParams.keyword"
                placeholder="请输入关键字"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="" prop="asc">
            <sort-con @change="handleQuery" v-model="tableQueryParams.asc" :label="'创建时间'"></sort-con>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <template slot="rowHandel">
        <el-button type="primary" icon="el-icon-plus"
                   size="mini" @click="handleAdd">新增检查
        </el-button>
      </template>

      <template slot="table" v-if="reloadTable">
        <el-scrollbar>
          <data-item-container @submitEvent="eventHandel" v-for="(item,index) in dataList" :check-data="item"
                               :key="item.id"></data-item-container>
        </el-scrollbar>
      </template>

      <template slot="pageDisplay">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="tableQueryParams.pageNum"
            :limit.sync="tableQueryParams.pageSize"
            @pagination="getList"
        />
      </template>
    </lst-page-container>

    <el-drawer
        class="diy-draw"
        :title="title"
        :wrapperClosable="false"
        :visible.sync="open">
      <drawer-content>
        <template slot="body">
          <el-scrollbar>
            <el-form :rules="rules" :model="form" ref="form" size="small"
                     label-width="80px">
              <el-form-item class="column-item" label="检查名称" prop="inspectName">
                <el-input
                    v-model="form.inspectName"
                    placeholder="请输入检查名称"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item " label="检查年份" prop="inspectYear">
                <el-date-picker
                    v-model="form.inspectYear"
                    align="right"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="column-item " label="检查层级" prop="inspectLevel">
                <el-select v-model="form.inspectLevel" placeholder="请输入检查层级" clearable>
                  <el-option
                      v-for="dict in dict.type.inspect_level"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="column-item" label="牵头部门" prop="inspectLeaderDept">
                <el-input
                    v-model="form.inspectLeaderDept"
                    placeholder="请输入牵头部门"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item" label="检查组联络员" prop="inspectLiaison">
                <el-input
                    v-model="form.inspectLiaison"
                    placeholder="请输入检查组联络员"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item" label="检查组联络方式" prop="inspectLiaisonContact">
                <el-input
                    v-model="form.inspectLiaisonContact"
                    placeholder="请输入检查组联络方式"
                    clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item class="column-item" label="检查组成员" prop="memberName">
                <tag-list :remove-tag="true" :add-tag="true" v-model="form.memberName"></tag-list>
              </el-form-item>
              <el-form-item class="column-item" label="检查内容" prop="inspectContent">
                <el-input type="textarea" v-model="form.inspectContent" placeholder="请输入" clearable></el-input>
              </el-form-item>
              <el-form-item class="column-item annex-box" label="依据文件" prop="fileIds">
                <template slot="label">

                  <el-button style="margin: 0" class="file-upload-bt" icon="el-icon-upload2" size="mini"
                             @click="upload">依据文件
                  </el-button>
                </template>
                <show-file-list :file-list="fileList" @delFile="delFile"></show-file-list>
              </el-form-item>
              <el-form-item class="column-item" label="计划完成时间" prop="planCompleteTime">

                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                v-model="form.planCompleteTime" clearable style="width: 100%; "></el-date-picker>

              </el-form-item>
              <el-form-item class="column-item" label="目标监管单位" prop="superviseOrg">
                <choose-org v-model="form.superviseOrg"></choose-org>
              </el-form-item>
              <el-form-item class="column-item" label="目标企业" prop="planCompleteTime">
                <dict-check v-model="form.enterpriseType" :multiple="true"
                            :dict-data="dict.type.sys_enterprise_type"></dict-check>
              </el-form-item>


            </el-form>
          </el-scrollbar>
        </template>
        <template slot="footer">
          <el-button icon="el-icon-refresh" size="mini" @click="saveDraft">保存草稿</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="submitData">创建</el-button>
        </template>
      </drawer-content>
    </el-drawer>

    <check-info ref="checkInfo"></check-info>
  </div>
</template>

<script>
import {
  addInspect,
  addInspectAndPublish, delDefectInspect, getInspectDetail,
  queryInspectList,
  updateInspect,
  updateInspectAndPublish
} from "@/api/checkPage/checkApi";
import {listPageMixins} from "@/mixins/listPageMixins";
import DataItemContainer from "@/views/checkPage/subPage/checkListPage/dataItemContainer.vue";
import DictCheck from "@/components/DictCheck/index.vue";
import {isArr} from "@/utils/arrayUtil";
import ShowFileList from "@/components/ShowFileList/index.vue";
import TagList from "@/components/TagList/index.vue";
import ChooseOrg from "@/views/components/ChooseOrg/index.vue";
import CheckInfo from "@/views/components/CheckInfo/index.vue";
import {setCurrentRouterName} from "@/views/checkPage/util/setCurrentRouterName";
import SortCon from "@/components/SortCon/index.vue";

export default {
  mixins: [listPageMixins],
  components: {
    DataItemContainer,
    DictCheck,
    ShowFileList,
    TagList,
    ChooseOrg,
    CheckInfo,
    SortCon
  },
  dicts: ['sys_enterprise_type', 'inspect_level'],
  data() {
    return {
      modelName: '专题检查',
      // 查询参数
      queryParams: {
        keyword: null,
        inspectYear: null,
        asc: null,
      },
      getListFun: queryInspectList,
      addFun: addInspectAndPublish,
      updateFun: updateInspectAndPublish,
      getInfoFun: getInspectDetail,
      deleteFun: delDefectInspect,
      baseForm: {
        id: null,
        //  检查名称
        inspectName: null,
        //  检查年份
        inspectYear: null,
        //  检查层级 字典inspect_level
        inspectLevel: null,
        //  牵头部门
        inspectLeaderDept: null,
        //  检查内容
        inspectContent: null,
        //  计划完成时间
        planCompleteTime: null,
        //  目标企业 字典sys_enterprise_type
        enterpriseType: [],
        //  依据文件
        fileIds: [],
        //  检查组联络员
        inspectLiaison: null,
        //  检查组联络方式
        inspectLiaisonContact: null,
        //  检查组成员
        memberName: [],

        //  目标监管单位代码
        superviseOrg: [],
      },
      rules: {
        inspectName: [
          {required: true, message: "检查名称不能为空", trigger: "blur"}
        ],
      },
    }
  },
  watch: {
    fileList(val) {
      this.form.fileIds = isArr(val) ? val.map(file => file.fileId) : [];
    }
  },
  methods: {
    showInfo({id}) {
      this.$refs.checkInfo.showCheckInfo(id)
    },
    eventHandel(eventItem, rowData) {
      let {handelCode, funName, param} = eventItem
      if (!this[funName] || typeof this[funName] !== 'function') return;
      this[funName]({rowData, param, handelCode})
    },
    reload() {
      this.getList()
    },
    goPage({rowData, param, handelCode}) {
      let {path} = param;
      if (path == null || path === '') return;
      let {id: inspectId} = rowData;
      setCurrentRouterName(handelCode, path)
      this.$router.push({path, query: {handelCode, inspectId}})
    },
    updateIns({rowData}) {
      this.handleUpdate(rowData)
    },
    deleteIns({rowData}) {
      this.handleDelete(rowData)
    },
    showCurrentInfo({rowData, param, handelCode}) {
      this.showInfo({id: rowData.id})
    },
    saveDraft() {
      let owner = this
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.startLoading('正在加载....')
          if (this.form.id != null) {
            updateInspect(this.form).then(response => {
              owner.$modal.msgSuccess('更新成功')
              owner.open = false
              owner.getList()
            }).finally(() => {
              owner.endLoading()
            });
          } else {
            addInspect(this.form).then(response => {
              owner.$modal.msgSuccess('新增成功')
              owner.open = false
              owner.getList()
            }).finally(() => {
              owner.endLoading()
            });
          }
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-scrollbar__view {
  .data-item-container {
    margin-bottom: 32px;

    &:last-child {
      margin-bottom: 0;
    }

    &:first-child {
      margin-top: 32px;
    }
  }
}

::v-deep .list-page-container-root {
  .header {
    height: max-content !important;
    margin-bottom: 0;

    .query-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
}
</style>
